<template>
  <div>
    <el-row :gutter="20" class="main-wrapper">
    <el-col :span="12">
          <div class="box_2">
            <span></span>
            <span></span>
            <span style="margin:0 0 0 41.5%"></span>
            <span style="margin:0 0 0 -41.5%"></span>
        <el-row style="margin-top: 18px;">
          <el-col :span="12">
            <p class="label">{{curOpt}}推送岗位</p>
            <div class="value" v-if="!jz">{{data1.todayCount}}</div>
            <animae-jz class="value"  v-if="jz"></animae-jz>
          </el-col>
          <el-col :span="12">
            <p class="label">推送岗位环比{{Number(data1.increase)>=0?'增加':'减少'}}</p>
            <div class="value" v-if="!jz2">{{Math.abs(data1.increase)}}</div>
            <animae-jz class="value"  v-if="jz2"></animae-jz>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :span="12">
          <div class="box_2">
            <span></span>
            <span></span>
            <span style="margin:0 0 0 41.5%"></span>
            <span style="margin:0 0 0 -41.5%"></span>
        <el-row style="margin-top: 18px;">
          <el-col :span="12">
            <p class="label">{{curOpt}}推送人才</p>
            <div class="value" v-if="!jz3">{{data2.todayCount}}</div>
            <animae-jz class="value"  v-if="jz3"></animae-jz>
          </el-col>
          <el-col :span="12">
            <p class="label">推送人才环比{{Number(data2.increase)>=0?'增加':'减少'}}</p>
            <div class="value" v-if="!jz4">{{Math.abs(data2.increase)}}</div>
            <animae-jz class="value"  v-if="jz4"></animae-jz>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
  </div>
</template>
<script>
import { getJobRecommendation, getTalentRecommendation } from '@/api/data'
export default {
  data() {
    return {
      data1: null,
      data2: null,
      jz:false,
      jz2:true,
      jz3:true,
      jz4:true
    }
  },
  props: ['height','dateProp','curOpt'],
  computed: {},
  mounted() {
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    init(){
      this.jz=true
      this.jz2=true
      this.jz3=true
      this.jz4=true
      getJobRecommendation(this.dateProp)
      .then(({data:{data}})=>{
        this.data1 = data
        this.jz=false
      this.jz2=false
      })
      getTalentRecommendation(this.dateProp)
      .then(({data:{data}})=>{
        this.data2 = data
        this.jz3=false
      this.jz4=false
      })
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
  .main-wrapper /deep/ .el-col
    height 100%
    text-align center
  .label
    color #ffffff
  .value
    color #8ebafb
    font-size 24px
    margin-top 10px
    font-weight bold
</style>